<script>
import {reactive} from "vue";

export default {
  name: "airindex",
  data() {
    return {
      activeName: 'second',
      form: {
        saddr:'',
        eaddr:'',
        stime:'',
        etime:''
      },
      air1:'头等舱',
      air2:'经济舱',
      airs:{
        airId: '',
        airSaddr: '',
        airEaddr: '',
        airSpace:'',
        airPrice:'',
        airStatus:'',
        airStime: '',
        airEtime: '',
        airNumber: '',
        ariType: '',
        ariName:''
      },
      fits: ['fill'],
      url:'https://s.qunarzz.com/f_cms/2023/1698388952072_821243513.jpg',
      url1:'https://s.qunarzz.com/flight_seat_rn/images/desktop/home_link.png',
      url2:'assets/beijing.jpg'

    }
  },
  mounted() {
    this.findAll();
  },
  methods:{
    onSubmit(saddr){
      this.$router.push({path:'/airsShow',query:{saddr:saddr}})
      // this.$axios.get('http://localhost:8085/air/findbyaddr',{
      //     params:{
      //         saddr:saddr,
      //     }
      // }).then(res=>{
      //
      // })
    },
    findAll(){
      this.$axios.get('/air/findAll').then(res=>{
        this.airs=res.data.data;
      })
    },
    findById(airId){
      console.log(airId)
      // this.$router.push({path:'/airsShow',query:{airId:airId}})
    },


  }

}
</script>

<template>
 <div >
   <div id="b" style="margin-left:160px">
       <el-col :offset="5" :span="18">
           <el-row>
               <el-col :offset="12" :span="12">
                   <a class="header_a">适老化及无障碍</a>
                   <a class="header_a">请登录</a>
                   <span class="header_a">或</span>
                   <a class="header_a">免费注册</a>
                   <a class="header_a">消息</a>
                   <a class="header_a">查看订单</a>
                   <a class="header_a">积分商城</a>
                   <a class="header_a">联系客服</a>
               </el-col>
           </el-row>
       </el-col>
       <el-col>
           <el-row>
               <el-col :span="19">
                   <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
                   <a class="header_a2">首页</a>
                   <a class="header_a2">机票</a>
                   <a class="header_a2">酒店</a>
                   <a class="header_a2">团购</a>
                   <a class="header_a2">度假</a>
                   <a class="header_a2">邮轮</a>
                   <a class="header_a2">门票</a>
                   <a class="header_a2">火车票</a>
                   <a class="header_a2">攻略</a>
                   <a class="header_a2">当地人</a>
                   <a class="header_a2">汽车票</a>
               </el-col>
           </el-row>
       </el-col>
   </div>
   <div style="width: auto; background-image: url(//source.qunarzz.com/site/images/wns/20150420_qunar_flight_homepage_top_button_31_1600x336.jpg)" >
        <div id="a"  style="margin-left:160px">
             <h1>机票预定</h1>
             <el-tabs  >
                 <el-tab-pane label="省内机票" >
                     <el-form ref="form" :model="form" label-width="10px" style="width: auto">

                         <el-form-item  >
                             <el-col :span="11">
                                 <el-input v-model="form.saddr" placeholder="请输入要出发的城市名称"></el-input>
                             </el-col>
                             <el-col class="line" :span="1" >=></el-col>
                             <el-col :span="11">
                                 <el-input v-model="form.eaddr" placeholder="请输入要到达的城市名称"></el-input>
                             </el-col>
                         </el-form-item>

                         <el-form-item  >
                             <el-col :span="11">
                                 <el-date-picker type="date" placeholder="选择出行时间" v-model="form.stime" style="width: 100%;"></el-date-picker>
                             </el-col>
                             <el-col class="line" :span="1" >=></el-col>
                             <el-col :span="11">
                                 <el-date-picker type="date" placeholder="选择返回时间" v-model="form.etime" style="width: 100%;"></el-date-picker>
                             </el-col>
                         </el-form-item>
                         <el-form-item >
                             <el-col :span="17">
                                 <div style="font-size: 15px;color: red">
                                     24小时客服电话：95117 <br>全程预订保障 去哪儿都放心
                                 </div>
                             </el-col>
                             <el-button type="primary" @click="onSubmit(form.saddr)">搜索</el-button>

                         </el-form-item>
                     </el-form>
                 </el-tab-pane>
             </el-tabs>
         </div>
   </div>
   <div class="demo-image"  style="padding-top: 50px ;margin-left:160px">
     <div class="block" v-for="fit in fits" :key="fit">
       <el-image
         style="width: 920px; height: 170px"
         :src="url"
         :fit="fit"></el-image>
       <el-image
         style="width: 270px; height: 160px;
          background: #fff;display: inline-block;
          border: 1px solid #e7e7e7;
          border-top-color: #01afc7;
          border-top-width: 5px; "
         :src="url1"
         :fit="fit" ></el-image>
     </div>
   </div>
   <div style="padding-top: 50px;margin-left:160px ">
     <div>
       <h3 style="display: inline;
                  font: normal 24px/24px Microsoft Yahei;
                  color: #0e83bf;">
         国内低价机票
       </h3>
       <a style=" margin-left: 400px ; font-size: 18px;  display: inline-block;">西安|</a>
       <a style="  font-size: 18px;  display: inline-block;">成都|</a>
       <a style="  font-size: 18px;  display: inline-block;">上海|</a>
       <a style="  font-size: 18px;  display: inline-block;">重庆|</a>
       <a style="  font-size: 18px;  display: inline-block;">深圳|</a>
       <a style="  font-size: 18px;  display: inline-block;">广州|</a>
       <a style="  font-size: 18px;  display: inline-block;">杭州|</a>
       <a style="  font-size: 18px;  display: inline-block;">北京</a>
     </div>
     <div style=" width: 920px; height: 490px;border:2px solid  #0e83bf; ">
       <div id="left-1">
         <div >
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>昆明</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.13</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥197</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>北京</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥209</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>成都</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.11</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥193</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>上海</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.13</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥103</span>
           </form>
         </div>

         <div style="padding-top: 15px">
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>重庆</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.13</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥189</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>深圳</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.16</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥264</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>广州</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.14</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥317</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>长沙</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥260</span>
           </form>
         </div>
         <div style="padding-top: 15px">
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>海口</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥400</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>郑州</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥343</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>厦门</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.11</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥267</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>杭州</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.14</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥210</span>
           </form>
         </div>
       </div>
       <div id="left-2">
         <div >
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>长春</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.16</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥290</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>天津</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥360</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>青岛</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.10</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥330</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>贵阳</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.15</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥360</span>
           </form>
         </div>

         <div style="padding-top: 15px">
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>武汉</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.10</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥220</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>济南</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥301</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>南宁</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.16</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥332</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>大连</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.14</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥260</span>
           </form>
         </div>
         <div style="padding-top: 15px">
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>沈阳</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.16</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥333</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>三亚</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.19</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥572</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>北京</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.12</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥360</span>
           </form>
         </div>
         <div>
           <form style="padding-top: 15px" >
             &nbsp; &nbsp; &nbsp; &nbsp;
             <span>西安</span>
             <i class="el-icon-right"></i>
             <span>合肥</span>
             &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>11.20</span>
             &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
             <span>￥426</span>
           </form>
         </div>
       </div>
     </div>


   </div>
   <div style="padding-top: 50px;margin-left:160px">
     <img style="width: 1100px;" src="../assets/15.jpg">
   </div>

 </div>


</template>

<style scoped>
#a{
  width: 650px;
  height: 336px;
  border: 6px solid #00afc7;
  background: #fff;
}
#b{
  width: 1200px;
  height:90px;
  ;
}
#left-1{
  width: 460px;
  height: 490px ;

  float: left;
}
#left-2{
  width: 460px;
  height: 490px ;

  float: left;
}
.header_a{
  font-size: 12px;
  margin-top: 0px;
  margin-left: 5px;
}
.header_img{
  float: left;
  margin-bottom: 0px;
}
.header_a2{
  font-size: 15px;
  font-family: "Hiragino Sans GB";
  float: left;
  margin-right: 12px;
  margin-top: 30px;
}

</style>
